/*83856*/
<template>
  <div>
    <h5 class="chart">
      websocket
    </h5>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-button type="" @click="build">建立连接</el-button>
        <el-button type="danger" @click="destory">销毁连接</el-button>

      </el-col>
      <el-col :span="4">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="start">推送内容</el-button>
      </el-col>
    </el-row>
    <p>
      {{ result }}
    </p>
  </div>
</template>

<script setup>
import {ref} from 'vue'

const result = ref('')
const input = ref('')
let ws = ref({})

const build = () => {
  ws = new WebSocket('ws://123.207.136.134:9010/ajaxchattest');
  ws.onopen = () => {
    // Web Socket 已连接上，使用 send() 方法发送数据
    ws.send('1')
    console.log('数据发送中...')
    ws.onmessage = evt => {
      console.log('数据已接收...')
      result.value = evt.data;
    }
  }
}

const destory = () => {
  ws.close();
}

const start = () => {
  ws.send(input);
}

</script>

<style scoped lang="scss">

</style>